Skip to content

Comments

fix: resolving first focus on elements is incorrect#735

Open
luozz1994 wants to merge 3 commits intoreact-component:masterfrom
luozz1994:fix-lock-focus
Open

fix: resolving first focus on elements is incorrect#735
luozz1994 wants to merge 3 commits intoreact-component:masterfrom
luozz1994:fix-lock-focus

Conversation

@luozz1994
Copy link

@luozz1994 luozz1994 commented Feb 13, 2026

问题点: Modal弹框首次focus 不正确,第二次才恢复正常行为

解决办法:在 syncFocus 时判断一下先当前元素是否已聚焦,如果没有的话进行聚焦操作,然后再使用兜底的逻辑聚焦到第一个可聚焦的子元素

fix ant-design/ant-design#56963

Summary by CodeRabbit

发布说明

  • Bug修复
    • 改进了恢复焦点逻辑,避免将焦点错误设置到不可聚焦的元素,提升焦点还原可靠性,并在聚焦时继续阻止页面滚动。
  • 新增
    • 新增可锁定焦点的公用接口,支持将焦点同步到目标元素或其首个可聚焦子项。
  • 测试
    • 添加了覆盖即时聚焦、已聚焦不重复聚焦与清理行为的单元测试。

@vercel
Copy link

vercel bot commented Feb 13, 2026

Someone is attempting to deploy a commit to the React Component Team on Vercel.

A member of the Team first needs to authorize it.

@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello @luozz1994, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此拉取请求旨在解决 Modal 组件在首次打开时焦点定位不准确的问题。通过在 lockFocus 机制中引入一个前置检查,确保目标元素在焦点同步之前已被正确聚焦,从而提升了用户体验和可访问性,避免了用户需要二次交互才能使焦点正常工作的困扰。

Highlights

  • 解决 Modal 首次聚焦问题: 修复了 Modal 弹框首次聚焦不正确的问题,之前需要第二次操作才能正常聚焦。
  • 改进 lockFocus 逻辑: 在 lockFocus 函数中,增加了对当前元素是否已聚焦的判断。如果未聚焦,则会先进行聚焦操作,然后再执行 syncFocus 方法,确保焦点行为的即时性和准确性。

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog
  • src/Dom/focus.ts
    • lockFocus 函数中,添加了检查元素是否已聚焦的逻辑。
    • 如果元素未聚焦,则调用 element.focus({ preventScroll: true }) 进行强制聚焦。
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

@coderabbitai
Copy link

coderabbitai bot commented Feb 13, 2026

Walkthrough

src/Dom/focus.ts 中:1) 调整了 syncFocus 的选择逻辑——当存在 lastElement 且未获得焦点时,优先选用 lastFocusElement(若在可聚焦列表中),否则仅在 lastElement 本身可聚焦时才使用它,最终才回退到第一个可聚焦元素;2) 为 lockFocus 添加了在元素尚未聚焦时立即调用 element.focus({ preventScroll: true }) 的行为以同步聚焦。新增/更新了相应的单元测试。

Changes

Cohort / File(s) Summary
核心实现
src/Dom/focus.ts
调整 syncFocus 的聚焦选择顺序,避免无条件使用不可聚焦的 lastElement;在 lockFocus 中添加立即聚焦 (element.focus({ preventScroll: true })) 的逻辑,并保留原解锁与事件清理流程。
测试与导出
tests/focus.test.tsx, src/Dom/focus.ts
focus 模块中对外导出新增 lockFocus(并在测试中引入);新增 lockFocus 的单元测试,覆盖立即聚焦、已聚焦不重复、同步到第一个可聚焦子元素及清理行为。

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 分钟

Possibly related PRs

诗歌

🐰 我在光里轻跳,耳朵贴着键盘声,
先把焦点抱紧,再把滚动放轻,
锁住一瞬,放手也有序,
小小窗里梦安宁,
我用胡须记住这一行代码。

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed 标题清楚地总结了主要变更:修复了首次聚焦元素的不正确行为问题,与代码变更内容相符。
Linked Issues check ✅ Passed 代码变更实现了#56963中的需求,通过改进syncFocus中对lastElement的判断逻辑来修正Modal首次焦点行为问题。
Out of Scope Changes check ✅ Passed 所有变更都专注于修复focus相关的bug,包括focus.ts的逻辑改进和相应的单元测试,无超出范围的改动。
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

你好,感谢你的贡献。这个修复通过在 lockFocus 时主动为元素设置焦点,解决了 Modal 弹窗首次焦点不正确的问题。这个改动确保了 syncFocus 在初始调用时能够正确记录最后一次聚焦的元素(lastFocusElement),从而使后续的焦点锁定逻辑能够正常工作。代码简洁且直接地解决了问题,注释也很清晰。做得很好!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Modal 焦点的问题

2 participants